$(function() {
    // 初始化 表单组件
    function initComponent() {
        // 1、上传文章封面
        function renderCover() {
            $('#inputCover').change(function() {
                const file = this.files[0];
                const src = URL.createObjectURL(file);
                $('#coverimg').prop('src', src)
            })
        }
        // 2、渲染文章类别
        function getCategorytList() {
            $.get('/admin/category/list', function(res) {
                // console.log(res.data);
                let html = "<option value=''>所有分类</option>";
                res.data.forEach(item => {
                    html += `<option value="${item.id}" >${item.name}</option>`;
                });
                $("#category").html(html);
            })
        }

        // 3、发布时间
        function sendTime() {
            //执行一个laydate实例
            layui.laydate.render({
                elem: '#articleDate' //指定元素
            });
        }

        // 4、富文本
        function renderTimyMce() {
            tinymce.init({
                selector: '#articleContent',
                language: 'zh_CN', //注意大小写
            });
        }
        // 1、调用上传文章封面函数
        renderCover()

        // 2、调用渲染文章类别函数
        getCategorytList()

        // 3、调用发布时间函数
        sendTime()

        // 4、调用富文本函数
        renderTimyMce()
    }
    // 初始化 表单组件
    initComponent()

    // 2.0 给发布按钮 绑定点击事件
    $(".btn-edit").click(function() {
        postArticle("已发布");
    })

    // 2.1 给 草稿按钮 绑定点击事件
    $(".btn-draft").click(function() {
        postArticle();
    })

    // 4 对获取表单数据 和提交 数据 做封装
    function postArticle(state = "") {
        // 2.1 获取前四个参数 formdata 序列化
        // $("form")[0]  jq对象 转原生dom对象
        const formdata = new FormData($("form")[0]);

        // 2.2 手动拼接剩下两个参数  content state
        formdata.append("content", tinyMCE.editors["articleContent"].getContent());
        // 动态传递进来
        formdata.append("state", state);


        // 2.3 发送请求 完成 文章的新增
        $.ajax({
            url: "/admin/article/publish",
            type: "post",
            data: formdata,
            contentType: false,
            processData: false,
            success(res) {
                console.log(res);
                // 2.4 
                // 2.4.1 显示提示框 提示用户发布成功 
                // 2.4.2 设定一个延时器  1.5s  再去跳转 到 文章列表页面即可
                layer.msg(res.msg);
                setTimeout(() => {
                    location.href = "article_list.html";
                }, 1500);
            }
        })
    }
})